<template>
  <div class="box">
      <div class="head">
        <div class="iconfont icon-new"></div>
        <div class="iconfont icon-fangdajing">
            <input type="search" placeholder="搜索新闻">
        </div>
        <div class="iconfont icon-user-active-copy"></div>
      </div>
      <div class="headlist">
          <div id="ullist">
                <ul>
                    <li><a href="#">关注</a></li>
                    <li><a href="#">头条</a></li>
                    <li><a href="#">娱乐</a></li>
                    <li><a href="#">体育</a></li>
                    <li><a href="#">汽车</a></li>
                    <li><a href="#">房产</a></li>
                    <li><a href="#">关注</a></li>
                    <li><a href="#">关注</a></li>
                    <li><a href="#">关注</a></li>
                    <li><a href="#">关注</a></li>
                    <li><a href="#">关注</a></li>
                    <li><a href="#">最后</a></li>
                </ul>
          </div>
          <div class="iconfont icon-you1"></div>
      </div>
      <div class="content">
          <div class="left">
              <div class="title">林志玲覅呢积分覅分别是解决就就就 看 看看看 卡你收到</div>
              <div class="bao">火星时报<a href="#">52更贴</a></div>
          </div>
          <div class="right">
              <img src="../../public/images/3.jpg" alt="">
          </div>
      </div>
      <div class="clist">
          <h4>合并欸办法欸发就哈哈飞机发表额客人儿科可阿胶九二九二</h4>
          <ul>
              <li><img src="../../public/images/2.jpg"></li>
              <li><img src="../../public/images/2.jpg"></li>
              <li><img src="../../public/images/2.jpg"></li>
          </ul>
        <div class="bao">火星时报<a href="#">52更贴</a></div>
      </div>
      <div class="video">
          <h4>美军于印军联合训练6机编队阵容强大</h4>
          <div class="bo">
              <div class="iconfont icon-zhibo"></div>
          </div>
          <div class="bao">火星时报<a href="#">52更贴</a></div>
      </div>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="less" scoped>
@import url('http://at.alicdn.com/t/font_1742706_z0on1gsmthe.css');

* {
    margin: 0;
    padding: 0;
}
ul {
    list-style: none;
}
.box {
    width: 100vw;
    margin: auto;  
    .head {
        display: flex;
        justify-content: space-between;
        height: 60/6.4vh;
        background-color: red;
        padding: 0px 20/3.6vw;
        .icon-new {
            height:60/6.4vh;
            line-height:60/6.4vh;
            font-size: 40/3.6vw;
            color: #fff;
        }
        .icon-user-active-copy {
            font-size: 24/3.6vw;
            height:60/6.4vh;
            line-height:60/6.4vh;
            color: #fff;
        }
        .icon-fangdajing {
            position: relative;
            width: 200/3.6vw;
            height:60/6.4vh;
            line-height:60/6.4vh;
            &::before {
                position: absolute;
                left: 25/3.6vw;
                top: 50%;
                transform: translateY(-50%);
                color: #fff;
                font-size: 20/3.6vw;
            }
            input {
                width: 100%;
                height: 40/6.4vh;
                border: none;
                outline: none;
                margin-top: 10/6.4vh;
                border-radius: 20/6.4vh;
                text-indent: 50/3.6vw;
                background-color: #f97979;
                font-size: 14/3.6vw;
                &::placeholder {
                    color: #fff;
                    font-size: 18/6.4vh;
                }
            }
        }
        
    }
    .headlist {
        position: relative;
        #ullist {
            width: 100%;
            height: 44/6.4vh;
            line-height: 44/6.4vh;
            overflow-x: auto;
            background-color: #e4e4e4;
          
            &::-webkit-scrollbar {
                display: none;
            }
            ul {
                display: flex;
                justify-content: space-around;
                width: 640/3.6vw;
                padding-right: 70/3.6vw;
                li {
                    width: 50/3.6vw;
                    text-align: center;
                    a {
                        font-size: 18/3.6vw;
                    }
                }
            }
        }
        .icon-you1 {
            position: absolute;
            right: 0;
            top: 0;
            width: 70/3.6vw;
            height: 44/6.4vh;
            line-height: 44/6.4vh;
            text-align: center;
            background-color: #e4e4e4;
            &::before {
                font-size: 34/3.6vw;
            }
        }
    }
    .content {
        width: 100%;
        height: 100/6.4vh;
       
        display: flex;
        justify-content: space-between;
        .left {
             padding: 20/6.4vh 10/6.4vh;
             .title {
                 margin-bottom: 10/6.4vh;
                 font-size: 16/3.6vw;
             }
            
        }
        .right {
            img {
                display: block;
                height: 100/6.4vh;
            }
        }
    }
    .clist {
        width: 100%;
        padding: 20/6.4vh 10/3.6vw;
        h4 {
            font-size: 18/3.6vw;
        }
        ul {
            width: 100%;
            margin: auto;
            display: flex;
            justify-content: space-between;
            li {
                width: 31%;
                height: 74/6.4vh;
                margin: 10/6.4vh 0;
                img {
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }
    .video {
        width: 100%;
        padding:20/6.4vh 10/3.6vw;
        h4 {
            font-size:18/3.6vw ;
        }
        .bo {
            width: 100%;
            height: 200/6.4vh;
            .icon-zhibo {
                position: relative;
                height: 100%;
                &::before {
                    position:absolute;
                    left: 50%;
                    top: 50%;
                    transform: translate(-50%,-50%);
                    font-size: 60/3.6vw;
                }
            }
        }
    }




    .bao {
        font-size: 14/3.6vw;
        a {
            display: inline-block;
            margin-left: 12/3.6vw;
        }
    }
}



</style>